<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/static/web/jsp/include.jsp"%>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下单</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="${path}/static/web/style/style.css">
    <link rel="stylesheet" href="${path}/static/web/style/art.css">
    <script>
        //
        var _id = '${id}';
        var _type = '${type}';
    </script>
    <style>
        .order_label{
            margin-left: 60px;
        }
    </style>
</head>
<body>
    <!-- 导航 -->
    <%@ include file="/static/web/jsp/top.jsp"%>

    <div id="makeOrderController" v-cloak>
        <!-- 内容 -->
        <div class="model_container">
            <div class="link_sprite">当前位置：<a href="">拍卖</a> &#155; <a href="">当前拍卖</a> &#155; <a href="">拍卖详情</a> &#155; <a href="">填写订单</a></div>

            <div class="content_block">
                <div class="order_progress clearfix">
                    <div class="progress_item active">
                        <div class="progress_icon">
                            <i class="icon icon_book"></i>
                        </div>
                        <p class="progress_txt">下单</p>
                    </div>
                    <div class="progress_item">
                        <div class="progress_icon">
                            <i class="icon icon_money"></i>
                        </div>
                        <p class="progress_txt">支付</p>
                    </div>
                    <div class="progress_item">
                        <div class="progress_icon">
                            <i class="icon icon_complete"></i>
                        </div>
                        <p class="progress_txt">下单成功</p>
                    </div>
                </div>

                <div class="order_head">
                    <span class="title">确认收货地址</span>
                    <a class="fr head_link" href="${path}/web/home/address">管理收货地址</a>
                </div>

                <div class="address_box">
                    <ul>
                        <li class="address_item" :class="{'active':order.address.id == item.id}" v-for="item in addressList" @click="selectAddress(item)">
                            <div class="address_left fl">
                                <i class="icon icon_location"></i>
                                <span>寄送至：</span>
                            </div>
                            <div class="address_control fr">
                                <span><i class="icon icon_radio"></i></span>
                                <a class="edit_address" href="javascript:void(0)" @click="editAddress(item)">修改本地址</a>
                            </div>
                            <div class="address_info">
                                <span>{{item.area}}{{item.address}}</span>
                                <span>（{{item.name}} 收）</span>
                                <span>{{item.phone}}</span>
                                <span v-if="item.is_default == 1">默认地址</span>
                            </div>
                        </li>
                    </ul>
                    <a class="address_more" href="javascript:void(0);" @click="showAddress(true)">使用新地址</a>
                </div>

                <div class="order_head mt_40" v-if="auction.id">
                    <span class="title">确认订单信息</span>
                </div>

                <div class="ordering" v-if="auction.id">
                    <div class="order_info">
                        <div class="order_pic fl"><img src="${path}/static/web/images/pro.jpg" v-sy-img="auction.pawnImg"/></div>
                        <div class="order_desc">
                            <h3 class="order_title">{{auction.goodsName}}</h3>
                            <div class="order_other">
                                <span>x 1</span>
                                <%--<span class="price">￥{{auction.finalMoney}}</span>--%>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="order_list">
                    <span class="name">成交价</span>
                    <p class="choose fr"><span class="price">￥{{order.price}}</span></p>
                </div>

                <div class="order_list">
                    <span class="name">服务费</span>
                    <p class="choose fr red">￥{{order.price}} X 10% =￥{{order.servicePrice}}</p>
                </div>
                <div class="order_list">
                    <span class="name">VIP等级优惠</span>
                    <p class="choose fr red">{{vip}}:￥{{order.servicePrice}} x {{order.creditRatio}}=￥{{order.creditPrice}}</p>
                </div>
                <div class="order_list">
                    <span class="name">优惠后服务费</span>
                    <p class="choose fr red">￥{{order.realServicePrice}}</p>
                </div>

                <div class="order_border clearfix">
                    <h2 class="box_title">选择框裱</h2>
                    <div class="border_select clearfix">
                        <div class="border_item">
                            <input type="radio" checked name="border_price" id="selected_border" v-model="order.border" value="1"/>
                            <label for="selected_border">是<span class="red">￥{{auction.packingPay+auction.expressPay}}</span>（费用包含装裱费、包装费、运费以及保险费） </label>
                        </div>
                        <div class="border_item">
                            <input type="radio" name="border_price" id="disabled_border" v-model="order.border" value="0"/>
                            <label for="disabled_border">否<span class="red">￥{{auction.expressPay}}</span>（费用包含包装费、运费以及保险费）</label>
                        </div>
                    </div>
                </div>
                <div class="order_list" v-if="order.cash != 0">
                    <span class="name">保证金扣除</span>
                    <p class="choose fr red">-￥{{order.cash}}</p>
                </div>
                <div class="order_list" v-if="auction.id">
                    <span class="name">配送方式</span>
                    <p class="choose fr">普通快递</p>
                    <%--<p class="choose fr">自提</p>--%>
                </div>

                <div class="order_list" v-if="auction.id">
                    <span class="name">支付方式</span>
                    <a href="javascript:void(0);" class="pay_money choose fr" v-show="order.payType == 1" @click="showPayType(true)"><span>支付宝</span> ></a>
                    <a href="javascript:void(0);" class="pay_money choose fr" v-show="order.payType == 2" @click="showPayType(true)"><span>微信</span> ></a>
                </div>

                <div class="order_list" v-if="auction.id">
                    <%--<span class="name c_orange">提示：请在30分钟之内付款。</span>--%>
                    <p class="choose fr">共1件 总计：<span class="price">￥{{order.totalPrice}}</span></p>
                </div>

                <div class="order_result" v-if="auction.id">
                    <div class="result_btn" @click="addOrder">
                        <a class="btn btn_primary" href="javascript:void(0);">提交订单</a>
                    </div>
                    <p class="result_txt">实付款：<span class="price">￥{{order.totalPrice}}</span></p>
                </div>

            </div>
        </div>


        <!-- 修改地址 -->
        <div class="art_model address_model" :style="{'display':param.showAddress?'block':'none'}">
            <div class="model_wrap">
                <div class="model_header">
                    <div class="head_title">地址信息</div>
                    <a class="icon icon_close head_close" href="javascript:void(0);" @click="showAddress(false)"></a>
                </div>
                <div class="art_model_content">
                    <form action="">
                        <div class="model_put"><input type="text" placeholder="请输入联系人" v-model="address.userName"/></div>
                        <div class="model_put"><input type="text" placeholder="请输入手机号" v-model="address.phone"/></div>
                        <div class="model_put"><input type="text" placeholder="请输入所在省市区" v-model="address.area"/></div>
                        <div class="model_put"><input type="text" placeholder="请输入详细地址" v-model="address.address"/></div>
                    </form>
                </div>
                <div class="model_btn mt_20">
                    <a href="javascript:void(0);" class="btn btn_primary" @click="addAddress">确 定</a>
                </div>
            </div>
        </div>

        <!-- 选择支付方式 -->
        <div class="art_model payfor_model" :style="{'display':param.showPayType?'block':'none'}">
            <div class="model_wrap">
                <div class="model_header">
                    <div class="head_title">选择支付方式</div>
                    <a class="icon icon_close head_close" href="javascript:void(0);" @click="showPayType(false)"></a>
                </div>
                <div class="art_model_content pay_ways">
                    <div class="pay_way" :class="{'on':order.payType == 1}" data-way="0" @click="selectPayType(1)">
                        <i class="icon icon_zfb"></i><span>支付宝</span><i class="fr icon icon_radio"></i>
                    </div>
                    <div class="pay_way" :class="{'on':order.payType == 2}" data-way="1" @click="selectPayType(2)">
                        <i class="icon icon_wx"></i><span>微信</span><i class="fr icon icon_radio"></i>
                    </div>
                    <%--<div class="pay_way" data-way="2">--%>
                        <%--<i class="icon icon_bank"></i><span>银行卡</span><i class="fr icon icon_radio"></i>--%>
                    <%--</div>--%>
                </div>
                <div class="model_btn mt_20" @click="showPayType(false)">
                    <a href="javascript:void(0);" class="btn btn_primary btn_pay_way">确 定</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 客服 -->
    <%@ include file="/static/web/jsp/footer.jsp"%>

    <form id="form" action="${path}/web/pay/onlinePay" method="post">
        <input type="hidden" name="content" id="content"/>
    </form>
</body>
<%--<script src="${path}/static/web/js/jquery.min.js"></script>--%>
<script src="${path}/static/web/js/art.js"></script>
<script src="${path}/static/web/js/biz/make_order.js"></script>
<script>

    // 选择使用的地址
    $('.address_box .address_item').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
    });
    //选择裱框
    $('.box_wrap').each(function(){
        var firstChild=$(this).children().eq(0);
        var firstPrice=firstChild.attr('data-price');
        firstChild.addClass('on');
        $('.box_price').text("￥"+firstPrice)
    });
    $('.box_wrap .box_item').click(function(){
        var thisPrice=$(this).attr('data-price');
        $(this).addClass('on').siblings().removeClass('on');
        $('.box_price').text("￥"+thisPrice)
    });

    //修改本地址
    $('.address_more,.edit_address').click(function(){
        $('.address_model').show();
    });

    //选择支付方式
    var payTxt='支付宝',
        payWay=0;
    $('.pay_ways .pay_way').click(function(){
        payTxt=$(this).find('span').text();
        payWay=$(this).attr('data-way');
        $(this).addClass('on').siblings().removeClass('on');
    });

    $('.btn_pay_way').click(function(){
        $(this).parents('.art_model').hide();
        $('.pay_money span').text(payTxt);
    });

    $('.pay_money').click(function(){
        $('.payfor_model').show();
    });


</script>

</html>